<template>
  <view class="back-to-top" v-if="show" @click="handleBackToTop">
    <text class="back-to-top-text">↑</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 定义props
const props = defineProps({
  // 滚动多少距离后显示按钮（默认70px）
  threshold: {
    type: Number,
    default: 70
  },
  // 滚动动画持续时间（默认300ms）
  duration: {
    type: Number,
    default: 300
  },
  // 按钮位置配置
  position: {
    type: Object,
    default: () => ({
      right: '40rpx',
      bottom: '100rpx'
    })
  }
});

// 定义事件
const emit = defineEmits(['backToTop']);

// 控制显示/隐藏
const show = ref(false);

// 返回顶部方法
const handleBackToTop = () => {
  // 不再直接调用uni.pageScrollTo，而是触发父组件的事件
  emit('backToTop');
};

// 监听页面滚动（需要在父组件中调用这个方法）
const handlePageScroll = (scrollTop) => {
  show.value = scrollTop > props.threshold;
};

// 暴露方法给父组件使用
defineExpose({
  handlePageScroll
});
</script>

<style scoped lang="scss">
.back-to-top {
  position: fixed;
  right: v-bind('position.right');
  bottom: v-bind('position.bottom');
  width: 80rpx;
  height: 80rpx;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
  z-index: 999;
  transition: all 0.3s ease;
}

.back-to-top:active {
  transform: scale(0.9);
  background: rgba(0, 0, 0, 0.9);
}

.back-to-top-text {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
}
</style>